{% if showNotifyMe %}
  <div class="as-notify-me-modal notify-me-modal modal fade" id="notify-me" tabindex="-1" aria-labelledby="notifMeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content border-0">
        <button type="button" class="btn p-0 as-close btn-close btn-modal-close icon-wrap-md" data-bs-dismiss="modal" aria-label="Close">
          {% render 'icon-close-circle' %}
        </button>
        <div class="modal-body p-0">
          <div class="modal-inner-content">
            <div class="notify-me-modal-wrap as-notify-me-modal-wrap position-relative">
              <div class="success-wrap">
                <div class="sucess-content absolute-center d-flex justify-content-center align-items-center">
                  <div class="text-center">
                    <div class="icon-wrap-xl mb-3 mb-md-4 text-success">
                      {% render 'icon-check-circle' %}
                    </div>
                    <h3 class="mb-1">{{ 'products.subscribe.success_title' | t }}</h3>
                    <div class="gray-600">{{ 'products.subscribe.success_message' | t }}</div>
                  </div>   
                </div>
              </div>
              <div class="form-wrap">
                <h2 class="h3 mb-1 text-center">{{ heading }}</h2>

                <div class="mb-0 text-center gray-700 no-last-margin richtext-with-link">{{ text }}</div>

                <div class="mt-4">
                  {% assign api = settings.subscribe_api %}
                  {% form 'customer', id: 'notify-me-contact_form', data-action: api, data-customize: true, class: 'as-notify-me-form as-validate-form notify-me-form', novalidate: 'novalidate', autocomplete: "off" %}
                  <input class="as-notify-me-tags" type="hidden" name="tags" value="">
                    <div class="position-relative">
                      <div class="">
                        <div class="form-pristine">
                          <input
                            data-pristine-required-message="{{ 'products.subscribe.email_error_message' | t }}"
                            data-pristine-email-message="{{ 'products.subscribe.email_error_message' | t }}"
                            type="email"
                            {% if api != blank %} name="email" {% else %} name="contact[email]"  {% endif %}
                            class="form-control input-pristine"
                            value="{{ customer.email }}"
                            aria-required="true"
                            autocorrect="off"
                            autocapitalize="off"
                            autocomplete="email"
                            placeholder="{{ 'products.subscribe.placeholder' | t }}"
                            required
                          >  
                        </div>
                        <div class="no-last-margin mt-1 gray-600 fs-footnote">{{ note }}</div>
                        <div class="d-grid mt-3">
                          <button type="submit" class="btn btn-primary">
                            <span class="as-spinner visually-hidden spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                            {{ 'products.subscribe.submit' | t }}
                          </button>
                        </div>
                        <div class="text-danger as-error-tips d-none">{{ 'products.subscribe.error_message' | t }}</div>
                      </div>
                    </div>
                  {% endform %}
                </div>
              </div>   
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
{% endif %}